<template>
	<view class="content">
		<view v-for="(item, index) in categories" :key="index" class="category flex-col" :style="{backgroundImage:'url('+ item.img+')'}">
			<navigator class="flex1" style="display: block;" :url="'../list/list?id='+ item.id + '&name=' + item.name"></navigator>
			<view class="title">{{ item.name }}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				categories: []
			}
		},
		onLoad() {
			this.$api.content.getCategoryList().then(res => {
			
				this.categories = res.data

			}).catch(err => {
				console.log(err)
			})

		},
		methods: {
		}
	}
</script>


<style lang="less">
	.category{
		height: 300rpx;
		margin-bottom: 20rpx;
		background-position: center;
		background-size: cover;
	}
	
	.title{
		font-weight: bold;
		text-align: center;
		background-color: rgba(0,0,0,.5);
		color: white;
		padding: 10rpx;
	}
</style>
